<template>
    <my-dailog v-model:show="showFlag" :styleType="20" :showtopclose="true" @close="close">
        <cut-border-box>
            <div class="xin-salepopbox" v-if="showtype==1">
                <div class="choushoutypetitle"  v-t="'collection.title1'">Please Select The Method Of Sale</div>
                <div class="csfsBtnBox">
                    <div class="csfsBtnItem"> <span @click="showtype=2;sellType=1" v-t="'collection.title2'">Sell Directly</span> </div>
                    <div class="csfsBtnItem"> <span @click="showtype=4;sellType=2" v-t="'collection.title3'">Auction</span> </div>
                </div>
            </div>

            <div class="ykjbox" v-else-if="showtype==2">
                <div class="choushoutypetitle" v-t="'collection.title2'">Sell Directly</div>
                <div class="ykjinputbox">
                    <span>$</span>
                    <input type="number" v-model="sell.amount" placeholder="Please fill out ...">
                </div>
                <div class="tips" v-t="'collection.title4'">Transaction Currency Support</div> 
                <div class="bhxxft">
                    <van-checkbox-group v-model="sell.currency" direction="horizontal">
                        <my-checkbox name="CXT">CXT</my-checkbox>
                        <my-checkbox name="ETH">ETH</my-checkbox>
                        <my-checkbox name="USDT">USDT</my-checkbox>
                    </van-checkbox-group>
                </div>
                <div class="hbbrnbxo">
                    <my-button :styleType="2" @click="goSaleAuth" v-t="'collection.title5'">Confirm</my-button>
                </div>
            </div>

            <div class="chshouquanbox" v-else-if="showtype==3">
                <div class="choushoutypetitle">{{sellType==1?'Sell':'Auction'}} Authorization</div>
                <div class="quanxian">
                    <img src="/images/qx.png" alt="">
                </div>
                <p v-t="'collection.title9'">After the transaction is completed, we will complete the NFT transfer according to your authorization and contract</p>
                <div class="shouqbtn">
                    <my-button :styleType="2" @click="submtApply">Authorize</my-button>
                    <!-- <my-button :styleType="2" @click="passFlag = true">Authorize</my-button> -->
                </div>
            </div>

            <div class="ykjbox paimaibox" v-else-if="showtype==4">
                <div class="paimaishijxc">
                    <div class="sjxzitem">
                        <div class="tips2" v-t="'collection.title6'">Auction Start Time</div>
                        <my-datetime-picker v-model="auction.startTime" :minDate="new Date()">
                            <!-- <input type="text" v-model="auction.startTime" readonly> -->
                            <div class="divmniput">{{auction.startTime}}</div>
                        </my-datetime-picker>
                    </div>
                    <div class="fgfh"><span>-</span></div>
                    <div class="sjxzitem">
                        <div class="tips2" v-t="'collection.title7'">Auction End Time</div>
                        <my-datetime-picker v-model="auction.endTime" :minDate="new Date()">
                            <!-- <input type="text" v-model="auction.endTime" readonly> -->
                            <div class="divmniput">{{auction.endTime}}</div>
                        </my-datetime-picker>
                    </div>
                </div>
                <div class="tips2" v-t="'collection.title8'">Set The Initial Auction Price</div>
                <div class="ykjinputbox">
                    <span>$</span>
                    <input type="number" v-model="auction.amount" placeholder="Please fill out ...">
                </div>
                <div class="tips" v-t="'collection.title4'">Transaction Currency Support</div>
                <div class="bhxxft">
                    <van-checkbox-group v-model="auction.currency" ref="checkboxGroup" direction="horizontal">
                        <my-checkbox name="CXT">CXT</my-checkbox>
                        <my-checkbox name="ETH">ETH</my-checkbox>
                        <my-checkbox name="USDT">USDT</my-checkbox>
                    </van-checkbox-group>
                </div>
                <div class="hbbrnbxo">
                    <my-button :styleType="2" @click="goAuctionAuth" v-t="'collection.title5'">Confirm</my-button>
                </div>
            </div>

            <div class="chenggongbox" v-if="showtype==5">
                <Success text='Submitted Successfully'/>
            </div>

            <pay-pass v-if="passFlag" @close="passFlag = false" @confirm="submtApply"/>
            
        </cut-border-box>
    </my-dailog>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted, inject } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import {CheckboxGroup as vanCheckboxGroup,RadioGroup as vanRadioGroup} from 'vant'
import moment from 'moment'
import cutBorderBox from '@/components/cutBorderBox.vue' 
import myDailog from '@/components/myDailog.vue' 
import Success from '@/components/success.vue' 
import myDatetimePicker from '@/components/myDatetimePicker.vue'
import { toast,myJsDailog,H5CallAPPFuction } from '@/utils/common'
import payPass from '@/components/myButton.vue'
import myRadio from '@/components/myRadio.vue'
import myCheckbox from '@/components/myCheckbox.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       cutBorderBox,
       myDailog,
       Success,
       myDatetimePicker,
       payPass,
       vanCheckboxGroup,
       vanRadioGroup,
       myRadio,
       myCheckbox
    },
    props:{
        bornid:''
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()
        const detailPopClose = inject('detailPopClose')

        const state = reactive({
            dtData:computed(()=>store.state.collection.nftdDetail),
            userInfo:computed(()=>store.state.base.userInfo),
            showFlag:true,
            showtype:1, // 1显示出售方式弹窗，2显示一口价弹窗，3显示一口价授权弹窗，4显示拍卖弹窗，5显示成功弹窗，
            hbtypes:[],
            auStartTime:'',
            auEndTime:'',
            sell:{
                amount:'',
                currency:['CXT','ETH','USDT']
            },
            auction:{
                amount:'',
                endTime:'',
                startTime:'',
                currency:['CXT','ETH','USDT']
            },
            sellType:1, // 1位一口价售卖，2为拍卖
            passFlag:false
        })
        onMounted(()=>{
            // 定义tradeResults方法，供app调用(app交易处理完成后调用)
            window['tradeResults'] = function (result) { // result：{"success":0,"msg":""}
                if(!result){
                    return toast('No Processing Result') // 没有处理结果
                }
                const rt = JSON.parse(result)
                if(rt.success==0){ // 处理出错了
                    toast(rt.msg)
                    state.passFlag = false
                    close()
                }else{ // 处理成功
                    state.passFlag = false
                    detailPopClose()  // 关闭详情弹窗
                    toast('Submitted Successfully')
                    context.emit('refresh')
                    //state.showtype=5
                } 
            }
        })

        const close = ()=>{
            context.emit('close')
        }

        const goSaleAuth = ()=>{
            if(!state.sell.amount){
                return toast('Please Enter The Selling Price')
            }else if(state.sell.currency.length<1){
                return toast('Please Select A Currency Type！')
            }
            state.showtype=3
        }
        const goAuctionAuth = ()=>{
            if(!state.auction.startTime){
                return toast('Please Select The Auction Start Time')
            }else if(!state.auction.endTime){
                return toast('Please Select The Auction End Time')
            }else if(moment(state.auction.endTime).diff(moment(state.auction.startTime), 'minutes') < 0 ){
                return toast('The auction end time cannot be less than the auction start time')
            }else if(!state.auction.amount){
                return toast('Set The Initial Auction Price')
            }else if(state.auction.currency.length<1){
                return toast('Please Select A Currency Type！')
            }
            state.showtype=3
        }

        const saleSubmit = (pass)=>{ // 一口价出售提交
            const appParams = {
                amount:state.sell.amount,
                contractAddress:state.dtData.contractAddress,
                ownerAddress:state.dtData.ownerAddress,
                ownerHeadImage:state.dtData.ownerHeadImage || '',
                ownerName:state.dtData.ownerName,
                tokenId:state.dtData.tokenId,
                currency:state.sell.currency.join(","),
                chainName:state.dtData.chainName,
                sellRecordId:state.dtData.sellRecordId,
                tokenStandard:state.dtData.tokenStandard,
                bornId:props.bornid
               // password:pass,
            }
            console.log("appParams:",appParams)
            try {
                // 寄售处理: 调用app的createConsignment方法，传入参数交由app处理，H5只接受处理结果（tradeResults方法接收）
                H5CallAPPFuction('createConsignment',JSON.stringify(appParams)) 
                close()
            } catch (error) {
                toast('调用app失败')
                //setTimeout(()=>{tradeResults('{"success":0,"msg":"55"}')},3000)
            }
        }
        const auctionSubmit = (pass)=>{ // 拍卖提交
            const appParams = {
                amount:state.auction.amount,
                endTime:state.auction.endTime,
                startTime:state.auction.startTime,
                contractAddress:state.dtData.contractAddress,
                ownerAddress:state.dtData.ownerAddress,
                ownerHeadImage:state.dtData.ownerHeadImage || '',
                ownerName:state.dtData.ownerName,
                tokenId:state.dtData.tokenId,
                currency:state.auction.currency.join(","),
                chainName:state.dtData.chainName,
                sellRecordId:state.dtData.sellRecordId, 
                tokenStandard:state.dtData.tokenStandard,
                bornId:props.bornid
               // password:pass,
            }
            console.log("appParams:",appParams)
            try {
                // 寄售处理: 调用app的createAuction方法，传入参数交由app处理，H5只接受处理结果（tradeResults方法接收）
                H5CallAPPFuction('createAuction',JSON.stringify(appParams)) 
                close()
                
            } catch (error) {
                toast('调用app失败')
                //setTimeout(()=>{tradeResults('{"success":0,"msg":"4r"}')},3000)
            }
        }
        const submtApply = (pass)=>{
            //alert(state.sellType)
            if(state.sellType==1){ // 寄售
                saleSubmit(pass)
            }else if(state.sellType==2){ // 拍卖
                auctionSubmit(pass)
            }
        }

        return{
            ...toRefs(state),
            close,
            goSaleAuth,
            submtApply,
            goAuctionAuth,
            detailPopClose
        }
    }
}
</script>

<style lang="scss" scoped>
   .choushoutypetitle{
        font-family: Poppins-SemiBold, Poppins;
        font-weight: 600;
        color: #FFFFFF;
        font-size: 30px;
        text-align: center;
        padding: 20px 0;
    }
    .xin-salepopbox{
        font-family: Inter-Medium, Inter;
        font-weight: 500;
        color: #FFFFFF;
        line-height: normal;
        padding: 30px ;
        min-height: 300px;
        min-width: 800px;
        .csfsBtnBox{
            display: flex;
            padding: 10px 0 0 0;
            .csfsBtnItem{
                flex: 1;
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #FFFFFF;
                width: 300px;
                margin: 0;
                span{
                    display: block;
                    height: 120px;
                    line-height: 120px;
                    text-align: center;
                    background: rgba(103,248,255,0.1);
                    border: 1px solid rgba(103,248,255,0.5);
                    
                }
                &+.csfsBtnItem{
                    margin-left:30px;
                }
            }
        }
    }
    .ykjbox{
        width: 800px;
        padding: 20px 30px;
        .ykjinputbox{
            display: flex;
            height: 90px;
            background: rgba(103,248,255,0.1);
            border: 1px solid rgba(103,248,255,0.5);
            line-height: 90px;
            padding:0 30px;
            span{
                font-size: 28px;
                color: #67F8FF;
                font-weight: 500;
            }
            input{
                flex: 1;
                border: 0;
                height: 100%;
                background: none;
                padding: 0 20px;
                font-size: 30px;
            }
        }
        .tips{
            font-family: Poppins-Medium, Poppins;
            font-weight: 500;
            color: #7F9ECA;
            font-size: 28px;
            padding: 15px 0 10px 0;
        }
        &.paimaibox{
            width: 900px;
            .tips2{
                font-family: Poppins-SemiBold, Poppins;
                font-weight: 600;
                color: #FFFFFF;
                font-size: 30px;
                padding: 20px 0 10px 0;
            }
            .paimaishijxc{
                display: flex;
                .sjxzitem{
                    flex: 1;
                    input,.divmniput{
                        width: 100%;
                        height: 80px;
                        background: rgba(103,248,255,0.1);
                        border-radius: 0px 0px 0px 0px;
                        opacity: 1;
                        border: 1px solid rgba(103,248,255,0.5);
                        padding: 0 15px;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                    .divmniput{
                        line-height: 80px;
                    }
                }
                .fgfh{
                    display: flex;
                    width: 30px;
                    font-size: 40px;
                    line-height: normal;
                    color: #3292BB;
                    height: 100%;
                    overflow: hidden;
                    font-weight: bold;
                    span{
                        display: block;
                        width: 100%;
                        text-align: center;
                        padding: 88px 0 0 0;
                    }
                }
            }
        }
    }
    .chshouquanbox{
        width: 700px;
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        color: #FFFFFF;
        line-height: normal;
        .quanxian{
            padding:20px 0;
            img{
                display: block;
                width: 110px;
                margin: 0 auto;
            }
        }
        p{
            font-size: 28px;
            line-height: 36px;
            color: #75A5DE;
            padding: 0 50px;
            text-align: center;
        }
        .shouqbtn{
            width: 250px;
            margin: 30px auto 0 auto;
        }
    }
    .hbbrnbxo{
        width: 200px;
        margin: 40px auto 0 auto;
    }
</style>
<style lang="scss">
    .ykjbox .van-checkbox__label{
        font-family: Poppins-Medium, Poppins;
        font-weight: 500;
        color: #fff;
        font-size: 28px;
    }
</style>